<template>
    <div class="container">
        <a-page-header style="background-color: transparent;" title="用户管理" @back="() => router.back()">
            <template #extra>
                <PlusOutlined style="font-size:.5rem" @click="addUserFlag = true" />
            </template>
        </a-page-header>

        <a-row :gutter="24" style="max-height: 90vh;overflow-y: auto;">
            <a-col :span="12" v-for="item in nursesData" :key="item.id" style="margin-bottom: .125rem;">
                <a-card :title="item.name">
                    <template #extra>
                        <a-popconfirm title="确定要删除此用户吗?" ok-text="确定" cancel-text="取消" @confirm="deleteUser(item.info)">
                            <DeleteOutlined style="color: red;font-size: .5rem;" />
                        </a-popconfirm>

                    </template>
                    <p>性别：<a-tag :color="item.sex === '男' ? 'blue' : 'green'">{{ item.sex }}</a-tag></p>
                    <p>科室：{{ item.department }}</p>
                    <p>病区：{{ item.illArea }}</p>
                    <p>权限：{{ item.permission }}</p>
                    <p>电子码录：{{ item.info }}</p>
                </a-card>
            </a-col>
        </a-row>


        <a-modal title="添加用户" :closable="false" centered v-model:open="addUserFlag" width="80%" destroyOnClose
            @ok="addUser">
            <a-form :model="nurse" :rules ref="formRef" layout="vertical">
                <a-form-item label="姓名" name="name">
                    <a-input v-model:value="nurse.name" placeholder="请输入姓名" />
                </a-form-item>
                <a-form-item label="性别" name="sex">
                    <a-radio-group v-model:value="nurse.sex">
                        <a-radio value="男">男</a-radio>
                        <a-radio value="女">女</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="科室" name="department">
                    <a-input v-model:value="nurse.department" placeholder="请输入科室" />
                </a-form-item>
                <a-form-item label="病区" name="illArea">
                    <a-input v-model:value="nurse.illArea" placeholder="请输入病区" />
                </a-form-item>
                <a-form-item label="权限" name="permission">
                    <a-radio-group v-model:value="nurse.permission">
                        <a-radio value="管理">管理</a-radio>
                        <a-radio value="普通">普通</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="电子码录" name="info">
                    <a-input v-model:value="nurse.info" placeholder="请输入电子码录" />
                </a-form-item>
                <a-form-item label="出生年月" name="birthday">
                    <a-date-picker v-model:value="nurse.birthday" placeholder="请选择出生年月" style="width: 100%;" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script setup lang="ts">
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router';
import { db } from '@/utils/DexieDB'
import { onMounted, ref } from 'vue';
import { addNurseApi, deleteNurseApi } from '@/API/API';

const router = useRouter()
const nursesData = ref<nurse[]>([])
const addUserFlag = ref(false)

const formRef = ref()

const nurse = ref({
    name: '',
    sex: '男',
    department: '',
    illArea: '',
    permission: '管理',
    info: '',
    birthday: '',
})

const rules = {
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
    ],
    sex: [
        { required: true, message: '请选择性别', trigger: 'change' },
    ],
    department: [
        { required: true, message: '请输入科室', trigger: 'blur' },
    ],
    illArea: [
        { required: true, message: '请输入病区', trigger: 'blur' },
    ],
    permission: [
        { required: true, message: '请选择权限', trigger: 'change' },
    ],
    info: [
        { required: true, message: '请输入电子码录', trigger: 'blur' },
    ],
}


function deleteUser(info: string) {
    console.log('删除用户');
    deleteNurseApi({ info }).then(() => {
        db.nurse.where('info').equals(info).delete()
    }).then(() => {
        queryUser()
    })
}

function addUser() {
    console.log('添加用户');
    formRef.value.validate().then(async () => {
        try {
            console.log('开始添加数据库记录');
            const id = await db.nurse.add({ ...nurse.value });
            console.log('数据库添加成功，ID:', id);
            return id;
        } catch (error) {
            console.error('数据库添加失败:', error);
            throw error;
        }
    }).then((res: number) => {
        console.log('处理API调用，ID:', res);
        if (res) {
            return addNurseApi(nurse.value);
        }
    }).then(() => {
        console.log('操作完成');
        addUserFlag.value = false;
        queryUser();
    }).catch((error: any) => {
        console.error('添加用户过程中出错:', error);
    });
}

async function queryUser() {
    const nurses = await db.nurse.toArray()
    console.log(nurses);

    nursesData.value = nurses
}

onMounted(async () => {
    await queryUser()
})

</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100vh;
    overflow: hidden;


    // :deep(.ant-page-header-back) {
    //     font-size: .4rem;


    // }

    // :deep(.ant-page-header-heading-title) {
    //     font-size: .5rem;
    //     line-height: .6rem;
    // }

    // :deep(.ant-card-head-title) {
    //     font-size: .45rem;
    // }

    .ant-card p {
        font-size: .3rem;

        .ant-tag {
            font-size: .3rem;
        }
    }


}
</style>